<template>
  <view class="page-container pt-64">
    <view
      class="page-container-bj"
      :style="{
        backgroundImage: 'url(' + bjImage + ')',
        backgroundSize: 'cover',
      }"
      v-if="0"
    ></view>
    <view class="status_bar"></view>
    <view class="plr-30 mine-head pb-30 mt-30">
      <view class="mine-head-set">
        <image
          src="/static/mine/set.png"
          class="set"
          mode=""
          @click="toSet"
        ></image>
      </view>
      <view class="flex flex-between white mb-30 mt-80">
        <view class="flex flex-start">
          <view class="mine-head-img ml-20 mb-30" @click="goUser">
            <image
              :src="userInfo.head_image"
              class="headImg"
              mode="aspectFill"
              v-if="userInfo.head_image"
            ></image>
            <image
              v-else
              src="/static/mine/head.png"
              mode=""
              class="headImg"
            ></image>
            <text
              class="size-20 text-center"
              style="
                width: 150rpx;
                height: 40rpx;
                position: absolute;
                bottom: -64rpx;
                border-radius: 18rpx;
                transform: translateX(-50%);
                background: #292a3f;
                left: 50%;
                line-height: 40rpx;
              "
              >优先购：{{ userInfo.gou_number }}次</text
            >
            <!-- <view class="mine-head-tag flex1 flex-middle" v-if="userInfo.is_auth == 1">
							<image src="/static/mine/vip.png" mode="" ></image>
							<text>已认证</text>
						</view> -->
          </view>

          <view class="ml-50 flex-1">
            <view class="mt-10">
              <text class="size-36 ell1 flex-1" style="width: 300rpx">{{
                userInfo.nick_name
              }}</text>
            </view>
            <view
              class="mine-head-tag flex1 flex-middle mt-20"
              v-if="userInfo.is_auth == 1"
            >
              <image src="/static/mine/vip.png" mode=""></image>
              <text>已认证</text>
            </view>
            <view class="flex flex-center mine-location mt-30">
              <text style="color: rgb(171 124 26); margin-right: 12rpx"
                >区块链地址：{{ userInfo.wallet_address }}</text
              >
              <image
                src="/static/copy.png"
                mode=""
                style="filter: ;"
                @click.stop="copy(userInfo.wallet_address)"
              ></image>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="menu-col mlr-20 mt-40 bg-1a white size-28">
      <view class="menu-item" @click="toMyNFT(0)">
        <view class="flex flex-start">
          <image
            src="../../static/my-menu-col-1.png"
            class="btmIcon mr-20"
          ></image>
          <view class=""> 我的藏品 </view>
        </view>
        <image src="../../static/more.png" class="more"></image>
      </view>
      <view style="border-top: 2rpx solid #dfdfdf70">
        <view class="flex flex-between plr-20 info">
<!--          <view class="menu-item"  @click="toMyNFT(0)">-->
<!--            <image src="/static/all-i.png"></image>-->
<!--            <text>全部</text>-->
<!--          </view>-->
          <view class="menu-item"  @click="toMyNFT(0)">
            <image src="/static/have-i.png"></image>
            <text>持有中</text>
          </view>
          <view class="menu-item"  @click="toMyNFT(1)">
            <image src="/static/sale-wait-i.png"></image>
            <text>挂售中</text>
          </view>
          <view class="menu-item"  @click="toMyNFT(2)">
            <image src="/static/sale-load-i.png"></image>
            <text>交易中</text>
          </view>
          <view class="menu-item"  @click="toMyNFT(3)">
            <image src="/static/sale-i.png"></image>
            <text>已出售</text>
          </view>
        </view>
      </view>
    </view>

    <view class="menu-row mlr-20 mt-40 color-9">
      <view class="menu-item" @click="toOrder">
        <image src="/static/order.png"></image>
        <text>我的订单</text>
      </view>
      <view class="menu-item" @click="toWallet">
        <image src="/static/mine/wallet.png"></image>
        <text>我的钱包</text>
      </view>
      <view class="menu-item" @click="toCompound">
        <image src="/static/mine/object.png"></image>
        <text>合成通道</text>
      </view>
      <!-- <view class="menu-item" @click="toStuff">
        <image src="/static/mine/materials.png"></image>
        <text>我的材料</text>
      </view> -->
      <view class="menu-item" @click="toTeam">
        <image src="/static/mine/team.png"></image>
        <text>我的团队</text>
      </view>
      <view class="menu-item mt-30" @click="toContact">
        <image src="/static/mine/serve.png"></image>
        <text>联系客服</text>
      </view>
      <view class="menu-item mt-30" @click="toInvite">
        <image src="/static/mine/share.png"></image>
        <text>邀请好友</text>
      </view>
      <view class="menu-item mt-30" @click="toinvites">
        <image src="/static/mine/hot.png"></image>
        <text>邀请榜</text>
      </view>
      <view class="menu-item mt-30" @click="toAddress()">
        <image src="/static/mine/hot.png"></image>
        <text>收货地址</text>
      </view>
      <view class="menu-item mt-30" @click="toUserGoodRewardList()">
        <image src="/static/mine/hot.png"></image>
        <text>获奖记录</text>
      </view>
    </view>

    <!-- <view class="menu-col mlr-32 bg-1a white size-28">
      <view class="menu-item" @click="toCompound">
        <view class="flex flex-start">
          <image src="../../static/my-menu-col-1.png" class="btmIcon mr-20"></image>
          <view class=""> 合成藏品 </view>
        </view>
        <image src="../../static/more.png" class="more"></image>
      </view>

      <view class="menu-item" @click="toWallet">
        <view class="flex flex-start">
          <image src="../../static/my-menu-col-2.png" class="btmIcon mr-20"></image>
          <view class=""> 我的钱包 </view>
        </view>
        <image src="../../static/more.png" class="more"></image>
      </view>

      <view class="menu-item" @click="toTeam">
        <view class="flex flex-start">
          <image src="../../static/my-menu-col-3.png" class="btmIcon mr-20"></image>
          <view class=""> 我的团队 </view>
        </view>
        <image src="../../static/more.png" class="more"></image>
      </view>

      <view class="menu-item" @click="toContact">
        <view class="flex flex-start">
          <image src="../../static/my-menu-col-4.png" class="btmIcon mr-20"></image>
          <view class=""> 联系客服 </view>
        </view>
        <image src="../../static/more.png" class="more"></image>
      </view>

      <view class="menu-item" @click="toInvite">
        <view class="flex flex-start">
          <image src="../../static/my-menu-col-5.png" class="btmIcon mr-20"></image>
          <view class=""> 邀请好友 </view>
        </view>
        <image src="../../static/more.png" class="more"></image>
      </view>

      <view @click="toAbout" class="menu-item">
        <view class="flex flex-start">
          <image src="../../static/my-menu-col-6.png" class="btmIcon mr-20"></image>
          <view class=""> 关于我们 </view>
        </view>
        <image src="../../static/more.png" class="more"></image>
      </view>
    </view> -->

    <!-- <u-button @click="quit" type="primary" class="mt-80">退出登录</u-button> -->

    <!-- 新增 -->
    <view class="mine-box pl-30 pr-30 mt-30" v-if="0">
      <view class="mine-main">
        <view class="mine-main-top flex1 flex-middle">
          <view
            @click="changeHead(index)"
            class="mine-main-top-li"
            v-for="(item, index) in 2"
            :key="index"
          >
            <image
              src="/static/hua.png"
              mode=""
              v-if="index == headIndex"
            ></image>
            <text :style="{ color: index == headIndex ? '#fff' : '' }"
              >{{ index == 0 ? "我的藏品" : "我的盲盒" }}({{
                index == 0 ? userInfo.goods_count : userInfo.box_count
              }})</text
            >
          </view>
        </view>
        <!-- <view class="mine-main-nav flex1 flex-middle pt-30 pb-30">
					<view class="mine-main-nav-li" :class="{active:index == 0}" v-for="(item,index) in tabList" :key="index">{{ item.name }}</view>
				</view> -->
        <u-tabs
          font-size="26"
          active-color="#FFFFFF"
          inactive-color="#999999"
          bg-color="transparent"
          :list="tabs"
          :is-scroll="true"
          :current="current"
          @change="change"
        ></u-tabs>
        <view class="mine-main-ul">
          <view
            @click="goDetails(item.id)"
            class="mine-main-li mb-20"
            v-for="(item, index) in list"
            :key="index"
          >
            <view class="mine-main-head flex1">
              <view class="mine-main-img">
                <image :src="item.image" mode="aspectFill"></image>
              </view>
              <view class="mine-main-right flex-1">
                <view class="mine-main-name size-30 white">{{
                  item.name
                }}</view>
                <view class="flex">
                  <view
                    class="mine-main-title size-26"
                    :class="{ blue: item.status == 2, red: item.status == 3 }"
                    >{{ getStatus(item) }}</view
                  >
                  <view
                    class="white size-28"
                    v-if="headIndex == 0 && item.stock"
                    >{{ item.number_f }}/{{ item.stock }}</view
                  >
                </view>

                <view class="mine-main-price flex1 flex-bottom">
                  <text>￥</text>
                  <text>{{ item.price }}</text>
                </view>
              </view>
            </view>
            <view
              class="mine-main-footer flex1 flex-middle mt-20 flex-end"
              v-if="item.status == 1 || item.status == 2"
            >
              <template v-if="item.status == 1">
                <u-button
                  class="pink"
                  hover-class="none"
                  v-if="headIndex == 0 && helpContent.goods_status == 1"
                  @click.stop="changeItem(item, index, 1)"
                  >转赠</u-button
                >
                <u-button
                  v-if="helpContent.is_trade == 1"
                  class="blue"
                  hover-class="none"
                  @click.stop="changeItem(item, index, 2)"
                  >挂售</u-button
                >
                <u-button
                  class="red"
                  hover-class="none"
                  v-if="headIndex == 1"
                  @click.stop="changeItem(item, index, 3)"
                  >开盒</u-button
                >
              </template>
              <u-button
                class="red"
                hover-class="none"
                v-if="item.status == 2"
                @click.stop="changeItem(item, index, 4)"
                >{{ item.is_show == 1 ? "下架" : "上架" }}</u-button
              >
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- <view class="ptb-40 mlr-30">
      <button class="default-button" @click="quit">退出登录</button>
    </view> -->
    <!-- 联系客服 -->
    <u-popup v-model="isService" mode="center" border-radius="30" width="90%">
      <view class="pt-40 pb-30">
        <view class="color-9 size-32 text-center">联系客服</view>
        <view class="flex1 flex-center flex-middle mt-60 mb-60">
          <view class="size-30 mr-20 f-bold" @click=""
            >邮箱：sdasdasd@163.com</view
          >
          <u-button class="serve-btn" hover-class="none">复制</u-button>
        </view>
        <u-button
          class="server-btns"
          hover-class="none"
          @click="isService = false"
          >知道了</u-button
        >
      </view>
    </u-popup>
    <!-- 出售 -->
    <u-popup v-model="saleShow" width="78%" mode="center" border-radius="30">
      <view class="pt-30">
        <view class="plr-40">
          <view class="ipt flex1 flex-center flex-middle mt-45 pl-150">
            <text>￥</text>
            <input type="digit" v-model="sale.price" placeholder="请输入价格" />
          </view>
          <view class="flex mt-20 mb-60">
            <view class="ipt flex1 flex-middle pl-20">
              <u-field
                v-model="sale.captcha"
                label-width="0"
                maxlength="6"
                :border-bottom="false"
                placeholder="请输入验证码"
              >
                <u-button
                  size="mini"
                  class="code"
                  slot="right"
                  type="success"
                  @click="getCode(2)"
                  >{{ codeText }}</u-button
                >
              </u-field>
              <u-verification-code
                ref="uCode"
                @change="codeChange"
              ></u-verification-code>
            </view>
          </view>
        </view>

        <view class="flex1 footer">
          <view
            class="flex-1 footer-btn size-30 color-9"
            @click="saleShow = false"
            >取消</view
          >
          <view class="flex-1 footer-btn size-30 color-1a" @click="submitSale"
            >确定</view
          >
        </view>
      </view>
    </u-popup>
    <!-- 转增 -->
    <u-popup
      v-model="increaseShow"
      width="78%"
      mode="center"
      border-radius="30"
    >
      <view class="pt-30">
        <view class="plr-40">
          <!-- <view class="text-center bold size-30 bold">提示</view> -->
          <!-- <u-field v-model="item.salePrice" label="￥" label-width="10" placeholder="请输入价格" type="number" /> -->
          <!-- <view class="ipt flex1 flex-center flex-middle mt-45 pl-150">
						<text>￥</text>
						<input type="digit" placeholder="请输入价格">
					</view> -->
          <view class="ipt flex1 flex-middle mt-20 pl-20">
            <input
              type="number"
              v-model="transfer.phone"
              maxlength="11"
              placeholder="请输入对方手机号"
            />
          </view>
          <view class="flex mt-20 mb-60">
            <view class="ipt flex1 flex-middle pl-20">
              <u-field
                v-model="transfer.captcha"
                label-width="0"
                maxlength="6"
                :border-bottom="false"
                placeholder="请输入验证码"
              >
                <u-button
                  size="mini"
                  class="code"
                  slot="right"
                  type="success"
                  @click="getCode(1)"
                  >{{ codeText }}</u-button
                >
              </u-field>
              <u-verification-code
                ref="uCode"
                @change="codeChange"
              ></u-verification-code>
            </view>
          </view>
        </view>

        <view class="flex1 footer">
          <view
            class="flex-1 footer-btn size-30 color-9"
            @click="increaseShow = false"
            >取消</view
          >
          <view
            class="flex-1 footer-btn size-30 color-1a"
            @click="submitTransfer"
            >确定</view
          >
        </view>
      </view>
    </u-popup>
    <u-popup v-model="openShow" mode="center" width="64%" border-radius="30">
      <view class="pl-30 pr-30 pt-40 pb-40">
        <view class="size-30 f-bold color-1a text-center">提示</view>
        <view class="size-28 color-1a text-center mt-30 mb-30"
          >此盲盒为特殊盲盒，需要消耗一定藏品才可打开，您的藏品不足，暂时不能开盒。</view
        >
        <view class="flex1 flex-middle flex-center">
          <u-button
            class="open-btn"
            hover-class="none"
            @click="openShow = false"
            >我知道了</u-button
          >
        </view>
      </view>
    </u-popup>
    <tabbar ref="tabbar"></tabbar>
  </view>
</template>

<script>
import tabbar from "../../components/tabbar.vue";
export default {
  components: {
    tabbar,
  },
  data() {
    return {
      userInfo: {},
      isService: false, //是否弹出联系客服
      service: "",
      status: 0, //
      tabs: [
        {
          name: "全部",
          type: 0,
        },
        {
          name: "持有中",
          type: 1,
        },
        {
          name: "挂售中",
          type: 2,
        },
        {
          name: "交易中",
          type: 3,
        },
        {
          name: "已出售",
          type: 4,
        },
        {
          name: "已转赠",
          type: 5,
        },
        {
          name: "已合成",
          type: 6,
        },
      ],
      tabList: [
        {
          name: "全部",
        },
        {
          name: "持有中",
        },
        {
          name: "挂售中",
        },
        {
          name: "已出售",
        },
      ],
      list: [],
      headIndex: 0, //
      current: 0,
      increaseShow: false, //转增
      saleShow: false, //
      openShow: false,
      item: {}, //选中的元素
      transfer: {
        id: "",
        phone: "",
        captcha: "",
      },
      sale: {
        id: "",
        price: "",
        captcha: "",
      },
      bjImage: "/h5/static/mine/2.png", //背景图
      codeText: "", //
      helpContent: {}, //
    };
  },
  onShow() {
    this.getImageBei();
    this.getUserInfo();
    this.getUsersGoodsList();
    this.gethelpContent();
    this.$refs['tabbar'].init();
  },
  methods: {
    //获取是否隐藏转赠
    gethelpContent() {
      this.$http("api/login/helpContent").then((res) => {
        this.helpContent = res;
      });
    },
    //获取验证码1转赠
    codeChange(text) {
      this.codeText = text;
    },
    getCode(type) {
      if (this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: "正在获取验证码",
        });
        this.$http(
          "api/login/sendCode",
          {
            phone: this.userInfo.phone,
            type: type == 1 ? 2 : 8,
          },
          "GET"
        )
          .then((res) => {
            uni.hideLoading();
            // 通知验证码组件内部开始倒计时
            this.$refs.uCode.start();
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.$u.toast("倒计时结束后再发送");
      }
    },
    getImageBei() {
      this.$http("api/newapi/imageBei").then((res) => {
        // this.bjImage = res.image1
      });
    },
    goDetails(id) {
      uni.navigateTo({
        url:
          this.headIndex == 0
            ? `/pages/my/collectDetails?id=${id}`
            : `/pages/my/boxDetails?id=${id}`,
      });
    },
    getUserInfo() {
      this.$http("api/user/userInfo")
        .then((res) => {
          this.userInfo = res;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    submitSale() {
      if (!this.sale.price)
        return uni.showToast({
          title: "请输入价格！",
          icon: "none",
        });
      this.saleShow = false;
      if (!this.sale.captcha)
        return uni.showToast({ title: "请输入验证码", icon: "none" });
      this.$http(
        this.headIndex == 0 ? "api/orders/goodsSale" : "api/orders/boxSale",
        this.sale,
        "POST"
      ).then((res) => {
        this.sale.price = "";
        this.sale.captcha = "";
        uni.showToast({
          title: "挂售成功!",
          icon: "none",
        });
        this.status = 0;
        this.getUsersGoodsList();
      });
    },
    //确认转赠
    submitTransfer() {
      if (!this.transfer.phone.match(/^(0|86|17951)?1[3456789]\d{9}$/))
        return uni.showToast({
          title: "请输入正确的转赠人手机号",
          icon: "none",
        });
      if (!this.transfer.captcha)
        return uni.showToast({ title: "请输入验证码", icon: "none" });
      this.increaseShow = false;
      this.$http("api/orders/goodsTransfer", this.transfer, "POST").then(
        (res) => {
          uni.showToast({
            title: "转赠成功!",
            icon: "none",
          });
          this.status = 0;
          this.getUsersGoodsList();
        }
      );
    },
    changeHead(index) {
      this.current = 0;
      this.status = 0;
      this.headIndex = index;
      this.getUsersGoodsList();
    },
    //1转赠2挂售3开盒
    changeItem(item, index, type) {
      if (type == 1) {
        this.item = item;
        this.transfer.id = item.id;
        this.increaseShow = true;
      } else if (type == 2) {
        this.item = item;
        this.sale.id = item.id;
        this.saleShow = true;
        // uni.showModal({
        //     title: '提示',
        // 		content:'是否确认挂售到市场？',
        //     success: function (res) {
        //         if (res.confirm) {
        // 					console.log(res);
        //             console.log('用户点击确定');
        //         } else if (res.cancel) {
        //             console.log('用户点击取消');
        //         }
        //     }
        // });
      } else if (type == 3) {
        uni.showModal({
          content: "立即拆开?",
          confirmColor: "#EFE0C0",
          success: (res) => {
            if (res.confirm) {
              this.$http(
                "api/orders/boxOpen",
                {
                  id: item.id,
                  captcha: "123456",
                },
                "POST"
              ).then((res) => {
                this.getUserInfo();
                this.getUsersGoodsList();
              });
            } else if (res.cancel) {
              uni.showToast({
                title: "取消操作!",
                icon: "none",
              });
            }
          },
        });
      } else if (type == 4) {
        let msg = item.is_show == 1 ? "下架" : "上架";
        uni.showModal({
          content: `是否确认${msg}？`,
          success: (res) => {
            if (res.confirm) {
              this.$http(
                this.headIndex == 0
                  ? "api/orders/goodsUpdateShow"
                  : "api/orders/boxUpdateShow",
                {
                  id: item.id,
                  is_show: item.is_show == 1 ? 0 : 1,
                },
                "POST"
              ).then((res) => {
                uni.showToast({
                  title: "操作成功!",
                  icon: "none",
                });
                this.getUsersGoodsList();
              });
            } else if (res.cancel) {
              uni.showToast({
                title: "取消操作!",
                icon: "none",
              });
            }
          },
        });
      }
    },
    change(index) {
      this.current = index;
      this.status = this.tabs[index].type;
      this.getUsersGoodsList();
    },
    getStatus(item) {
      let txt = "";
      switch (item.status) {
        case 1:
          txt = "持有中";
          break;
        case 2:
          txt = item.is_show == 1 ? "挂售中" : "";
          break;
        case 3:
          txt = "交易中";
          break;
        case 4:
          txt = "已出售";
          break;
        case 5:
          txt = "已转赠";
          break;
        case 6:
          txt = this.current == 0 ? "已合成" : "已打开";
          break;
        default:
          break;
      }
      return txt;
    },
    getUsersGoodsList() {
      this.$http(
        this.headIndex == 0
          ? "api/orders/usersGoodsList"
          : "api/orders/usersBoxList",
        {
          status: this.status,
        }
      )
        .then((res) => {
          this.list = res;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    quit() {
      uni.removeStorageSync("token");
      uni.navigateTo({
        url: "../login/index",
      });
    },
    goUser() {
      uni.navigateTo({
        url: "./editUser",
      });
    },
    toSet() {
      uni.navigateTo({
        url: "./setting",
      });
    },
    toOrder() {
      uni.navigateTo({
        url: "./myOrder",
      });
    },
    toCollet() {
      uni.navigateTo({
        url: "./myCollect",
      });
    },
    toBox() {
      uni.navigateTo({
        url: "./myBox",
      });
    },
    toTeam() {
      uni.navigateTo({
        url: "./myTeam",
      });
    },
    toInvite() {
      uni.navigateTo({
        url: "./myInvite?uuid=" + this.userInfo.uuid,
      });
    },
    toinvites() {
      uni.navigateTo({
        url: "/pages/my/invite",
      });
    },
    toAddress() {
      uni.navigateTo({
        url: "/pages/my/address",
      });
    },
    toUserGoodRewardList() {
      uni.navigateTo({
        url: "/pages/my/userGoodRewardList",
      });
    },
    toContact() {
      uni.navigateTo({
        url: "./contact",
      });
    },
    toWallet() {
      uni.navigateTo({
        url: "./myWallet",
      });
    },
    // 合成藏品
    toCompound() {
      uni.navigateTo({
        url: "/pages/chip/index",
      });
    },
    toStuff() {
      uni.navigateTo({
        url: "../chip/stuff",
      });
    },
    // 实名认证
    toAuth() {
      uni.navigateTo({
        url: "./realAuth",
      });
    },
    toAbout() {
      uni.navigateTo({
        url: "./about",
      });
    },
    toMyNFT(num) {
      let sign = num || 0;
      uni.navigateTo({
        url: `./myNFT?id=${sign}`,

      });
    },
    copy(val) {
      // #ifdef APP-PLUS
      uni.setClipboardData({
        data: val,
        success: function () {
          uni.hideToast();
          uni.getClipboardData({
            success: function (res) {
              uni.showToast({
                title: "复制成功",
                icon: "none",
              });
            },
          });
        },
      });
      // #endif
      // #ifdef H5
      this.$copyText(val).then(
        function (e) {
          uni.showToast({
            title: "复制成功!",
            icon: "none",
          });
        },
        function (e) {
          uni.showToast({
            title: "复制失败!",
            icon: "none",
          });
        }
      );
      // #endif
    },
  },
};
</script>
<style>
page {
  background: #f5f5f5;
}
</style>
<style lang="less" scoped>

page{
	background: #f5f5f5;
}
.white {
  color: #3c3c3c;
}
.gold {
  color: #9c8b66;
}
/deep/ .u-field {
  padding: 0 !important;
}
/deep/ .u-tab-bar {
  background: linear-gradient(90deg, #eea634, #de2d32);
}
.page-container {
  background: #fff;
  min-height: calc(100vh - var(--window-bottom));
}
.page-container-bj {
  height: 480rpx;
  position: fixed;
  z-index: 0;
  top: 0;
  left: 50%;
  width: 98%;
  background-size: 120% 120% !important;
  background-repeat: no-repeat !important;
  background-color: #0a0b20;
  background-position: center;
  transform: translate(-50%);
}
.mine-head {
  position: relative;
  z-index: 1;
}
.mine-head-set {
  position: relative;
  display: flex;
  justify-content: flex-end;
  image {
    width: 42rpx;
    height: 42rpx;
    display: block;
    filter: brightness(0.1);
  }
}

.mine-head-img {
  position: relative;
  color: #fff;
}
.headImg {
  width: 122rpx;
  height: 122rpx;
  border-radius: 50%;
  border: 2rpx solid #3c3c3c30;
}
.mine-head-tag {
  position: relative;
  top: -10rpx;
  width: 130rpx;
  height: 36rpx;
  background: #292a3f;
  border-radius: 18rpx;
  // transform: translateX(-50%);
  image {
    width: 36rpx;
    height: 36rpx;
    margin-right: 5rpx;
  }
  text {
    color: #ffd731;
    font-size: 24rpx;
  }
}

.mine-location {
  width: 500rpx;
  height: 52rpx;
  padding: 0 12rpx;
  position: relative;
  top: 20rpx;
  // background: url("@/static/mine/address.png") no-repeat;
  background-size: cover;
  image {
    width: 24rpx;
    height: 24rpx;
    filter: brightness(0.5);
  }
  text {
    flex: 1;
    color: #ffffff;
    font-size: 26rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.serve-btn {
  margin: 0;
  width: 87rpx;
  color: #ffffff;
  font-size: 26rpx;
  height: 44rpx !important;
  background: #303143;
  border-radius: 22rpx;
  line-height: 44rpx;
  &::after {
    border: none;
  }
}

.server-btns {
  margin: 0 auto;
  width: 250rpx;
  color: #ffffff;
  font-size: 26rpx;
  line-height: 68rpx;
  height: 68rpx !important;
  background: linear-gradient(90deg, #eea634, #de2d32);
  border-radius: 34rpx;
  &::after {
    border: none;
  }
}

.more {
  width: 24rpx;
  height: 24rpx;
}

.btmIcon {
  width: 40rpx;
  height: 40rpx;
}

.info {
  .menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto !important;
    padding: 40rpx 0 !important;
    image {
      width: 40rpx;
      height: 40rpx;
      filter: brightness(0.1);
    }
    text {
      margin-top: 10rpx;
      font-size: 25rpx;
      color: #f5f5f5;
    }
  }
}

.menu-row {
  display: flex;
  align-items: center;
  border-radius: 10rpx;
  padding: 20rpx 0;
  position: relative;
  flex-wrap: wrap;
  background: #f5f5f590;
  .menu-item {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx 0;
    image {
      width: 40rpx;
      height: 40rpx;
      filter: brightness(0.1);
    }
    text {
      margin-top: 20rpx;
      font-size: 25rpx;
      color: #282828;
    }
  }
}

.mine-main {
  position: relative;
  background: rgba(41, 42, 63, 0.4);
  border: 1rpx solid rgba(255, 255, 255, 0.4);
  border-radius: 30rpx 30rpx 0rpx 0rpx;
  padding: 40rpx 30rpx 0 30rpx;
  border-bottom: none;
}

.menu-col {
  position: relative;
  margin-top: 40rpx;
  border-radius: 10rpx;
  padding: 0 30rpx;
  background: #f5f5f590;
  .menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 96rpx;
    padding: 20rpx 0;
    image {
      width: 40rpx;
      height: 40rpx;
      filter: brightness(0.1);
    }
    text {
      color: #282828;
    }
    & + .menu-item {
      // border-top: 2rpx solid #333;
    }
  }
}

.default-button {
  background: #1a1a1a;
  border-radius: 50rpx;
  font-size: 32rpx;
  color: #efe0c0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mine-main-top {
  .mine-main-top-li {
    width: 240rpx;
    position: relative;
    height: 50rpx;
    image {
      width: 50rpx;
      height: 50rpx;
      position: absolute;
      left: 0;
    }
    text {
      flex: 1;
      // width: 200rpx;
      left: 30rpx;
      position: absolute;
      z-index: 9;
      color: #999999;
      font-size: 32rpx;
    }
  }
}
.mine-main-nav {
  justify-content: space-around;
  .mine-main-nav-li {
    color: #999999;
    font-size: 26rpx;
  }
  .active {
    color: #ffffff;
    font-size: 28rpx;
    font-weight: bold;
    position: relative;
    &::after {
      content: "";
      left: 50%;
      bottom: -14rpx;
      transform: translateX(-50%);
      position: absolute;
      width: 44rpx;
      height: 4rpx;
      background: linear-gradient(90deg, #eea634, #de2d32);
      border-radius: 2rpx;
    }
  }
}
.mine-main-ul {
  overflow: hidden;
  .mine-main-li {
    padding: 30rpx;
    background: #292a3f;
    border-radius: 16rpx;
    box-sizing: border-box;
    .mine-main-img {
      image {
        width: 150rpx;
        height: 150rpx;
        border-radius: 6rpx;
      }
      margin-right: 20rpx;
    }
    .mine-main-right {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .mine-main-title {
        font-weight: 500;
        color: #d7b92e;

        background: linear-gradient(0deg, #a776f7 0%, #6990f7 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .blue {
        color: #d7b92e;

        background: linear-gradient(0deg, #fed05e 0%, #edafff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .red {
        color: #ea232c;
      }
      .mine-main-price {
        text {
          color: #ffffff;
          font-size: 28rpx;
          line-height: 1;
          &:last-child {
            font-size: 36rpx;
          }
        }
      }
    }
    .mine-main-footer {
      .blue,
      .red,
      .pink {
        width: 130rpx;
        height: 56rpx !important;
        padding: 0;
        margin: 0;
        color: #ffffff;
        font-size: 30rpx;
        border-radius: 28px;
        &::after {
          border: none;
        }
      }
      .blue {
        margin-right: 20rpx;
        background: linear-gradient(90deg, #a776f7 0%, #6990f7 100%);
      }
      .red {
        background: linear-gradient(90deg, #eea634, #de2d32);
      }
      .pink {
        margin-right: 20rpx;
        background: linear-gradient(90deg, #e6867f 0%, #e692ec 100%);
      }
    }
  }
}
.ipt {
  border: 1px solid #dadada;
  border-radius: 10rpx;
  height: 66rpx;
  input {
    font-size: 26rpx;
  }
}
.footer {
  border-top: 2rpx solid #cccccc;
  .footer-btn {
    height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    &:first-child {
      border-right: 2rpx solid #cccccc;
    }
  }
}
.code {
  width: 150rpx;
  color: #ffffff;
  font-size: 24rpx;
  margin: 0;
  padding: 0;
  line-height: 66rpx;
  height: 66rpx !important;
  background: linear-gradient(90deg, #eea634, #de2d32);
  border-radius: 10rpx;
  &::after {
    border: none;
  }
}
.open-btn {
  width: 240rpx;
  line-height: 56rpx;
  color: #ffffff;
  font-size: 28rpx;
  margin: 0;
  padding: 0;
  height: 56rpx !important;
  background: linear-gradient(90deg, #eea634, #de2d32);
  border-radius: 28rpx;
  &::after {
    border: none;
  }
}
</style>
